<template>
  <div>
    <el-card>
      <div class="container">
        <div id="myEcharts" class="upper"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import {onMounted} from "vue";
import { getUnReportList,getReportList } from "@/api/enterpriseEnergyList";

let myEcharts = echarts;

onMounted(() => {
      initChart()
    });

const initChart=()=>{
  //存放日期
  let dateList=[];
  //存放已上报统计结果
  let countReportList=[];
  //存放未上报统计结果
  let countUnReportList=[];
  let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
  chart.setOption({ 
          title: {
            text: "近30天每日数据上报情况",
            left: "center",
          },
          tooltip : {
          trigger: 'axis'
          },
          toolbox: {
              show : true,
              feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType : {show: true, type: ['line', 'bar']},
                  restore : {show: true},
                  saveAsImage : {show: true}
              }
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : null
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  max:3000,
                  min:0 
            }
          ],
          series : [
              {
                  name:'已上报',
                  type:'bar',
                  data : null,
                  markPoint : {
                      data : [
                          {type : 'max', name: '最大值'},
                          {type : 'min', name: '最小值'}
                      ]
                  },
                  markLine : {
                      data : [
                          {type : 'average', name: '平均值'}
                      ]
                  }
              },
              {
                  name:'未上报',
                  type:'bar',
                  data : null,
                  markPoint : {
                      data : [
                          {type : 'max', name: '最大值'},
                          {type : 'min', name: '最小值'}
                      ]
                  },
                  markLine : {
                      data : [
                          {type : 'average', name : '平均值'}
                      ]
                  }
              }
          ]
        });
    //获取已上报数据，给echarts动态绑定数据
    getReportList().then(res=>{
      if(res.status==200){
        for (var index in res.data) {
        dateList.push(index)
        countReportList.push(res.data[index])
      }
        chart.setOption({
          xAxis:[
              {
                data:dateList
            }
          ],
          series : [
                {
                    name:'已上报',
                    type:'bar',
                    data : countReportList,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
              ]
        })
      }
    })
    //获取未上报数据，给echarts动态绑定数据
    getUnReportList().then(res1=>{
        if(res1.status==200){
          for (var index in res1.data) {
            countUnReportList.push(res1.data[index])
          }
        }
        chart.setOption({
          series : [
              {
                  name:'未上报',
                  type:'bar',
                  data : countUnReportList,
                  markPoint : {
                      data : [
                          {type : 'max', name: '最大值'},
                          {type : 'min', name: '最小值'}
                      ]
                  },
                  markLine : {
                      data : [
                          {type : 'average', name : '平均值'}
                      ]
                  }
              }
          ]
        })
      })
      window.onresize = function () {
        chart.resize();
      };
    }

</script>

<style scoped>
 .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .upper {
            flex: 1;
            background-color: rgb(255, 255, 255);
        }
</style>
